﻿<div class="relative height-100" data-bind="Example03">
    <style>
        .albums {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-image: url("app/album/example03/images/main-bg.jpg");
            background-size: 100% 100%;
        }

        .scroll-animation {
            position: relative;
            width: 4.2rem;
            height: 5.4rem;
            margin: 1rem auto;
            perspective: 9rem; /*类似数码相机的焦距，值越大图像拉的越近，值越小图像离的越远*/
            transform-style: preserve-3d; /*perspective作用在当前元素、transform-style作用于子元素*/
        }

        .scroll-div {
            position: absolute;
            left: 0;
            top: 0;
            width: 4.2rem;
            height: 5.4rem;
            background-size: 100% 100%;
            cursor: pointer;
            transition: all 0.5s ease-in-out;
        }

        .scroll-left {
            position: absolute;
            left: 0;
            top: 3.5rem;
            width: 1.1rem;
            height: 0.72rem;
            cursor: pointer;
        }

        .scroll-right {
            position: absolute;
            right: 0;
            top: 3.5rem;
            width: 1.1rem;
            height: 0.72rem;
            cursor: pointer;
        }
    </style>

    <div class="albums">
        <div class="scroll-animation" data-bind="foreach: albums">
            <div class="scroll-div" data-bind="style: {backgroundImage: bgImg}"></div>
        </div>
        <img class="scroll-left" src="app/album/example03/images/left.png" alt="" data-bind="click: leftScroll"/>
        <img class="scroll-right" src="app/album/example03/images/right.png" alt="" data-bind="click: rightScroll"/>
    </div>
</div>
